<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
%>
<html>
<head>
    <title>主页</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.min.css" integrity="sha512-omRxviAbZbsRLmYjGYaOjLuafC5Jw17PYyg1eH4XaT5vWx+cOng6t+bq9VyjZBWrUuduYgYuIuD2d3MOz7S2dA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js" integrity="sha512-mIKH3M2bRlIyhG4tBEbJ8dn8t8JFlNJU2NXlJePgpQ72CK4jAYsZyCGFcASRGtPBbcAQhz67KTkA1Jw6Kizk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        .nav{
            width: 100vw;
            height: 50px;
            background-color: white;
            border:0.5px solid gray;
        }
        .userDiv{
            float: right;
            width: auto;
            height: 100%;
        }
        table{
            float: left;
        }
        .nav2{
            display: flex;
            flex-direction: column;
        }
        td{
            text-align: center;
        }
        th{
            text-align: center;
        }

        #test1{
            display: flex;
            justify-content: center;
        }
        .link{
            height: 40px;
            width: 80px;
            border: 1px solid deepskyblue;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="userDiv">
        <%
        Object userName= (String) session.getAttribute("userName");
        %>
        <span>欢迎<%=userName%></span>
        <a href="<%=basePath%>/outLogin" >退出</a>
    </div>
</div>
<div class="nav2">
    <table id="studentTable">
    </table>
    <div id="test1">
            <div class="page-link" id="pre" onclick="prePage()">Previous</div>
            <div class="page-link"  id="currPage"></div>
            <div class="page-link" id="next" onclick="nextPage()">Next</div>
            <span class="page-link" id="totolPage" onclick="lastPage()"></span>
    </div>
    <form id="studentForm">
        <label>ID:</label><input type="number" name="stId" id="stId" readonly="readonly"><br>
        <label>姓名:</label><input type="text" name="stName" id="stName"><br>
        <label>性别:</label><input type="text" name="sex" min="1" max="2" id="stSex"><br>
        <label>生日:</label><input type="date" name="age" id="stBirth"><br>
        <button type="button" onclick="toSubmit()" class="toModify">提交</button>
        <button type="reset"  class="toModify">重置</button>
    </form>
</div>
</body>
<script>
    var basePath = location.protocol+"//"+location.host+"/ssmDemo"
    console.log(location.host)
    var pageSize=10;
    $(function() {
        initTable(1,pageSize);
    })
    function prePage(){
        var cuurPage=$("#currPage").text();
        cuurPage=parseInt(cuurPage)
        if (cuurPage>1){
            cuurPage=cuurPage-1
            console.log(cuurPage)
        toPage(cuurPage)
        }
    }
    function nextPage(){
        var cuurPage=$("#currPage").text();
        var totol=$("#totolPage").text();
        cuurPage=parseInt(cuurPage)
        totol=parseInt(totol)
        var maxCuur=totol
        if (maxCuur>cuurPage) {
            cuurPage=cuurPage+1
            toPage(cuurPage)
        }
    }
    function lastPage(){
        var totol=$("#totolPage").text();
        cuurPage=parseInt(totol)
        toPage(cuurPage)

    }
    function toPage(crPage){
        console.log(crPage)
        initTable(crPage,pageSize);
    }
    function formMd(obj) {
        const id = $(obj).parent().parent();
        $("#stId").val($(id).children(".sId")[0].innerText)
        $("#stName").val($(id).children(".sName")[0].innerText)
        $("#stSex").val($(id).children(".sSex")[0].innerText)
        $("#stBirth").val($(id).children(".sBirth")[0].innerText)
    }
    function initTable(pageNum,pageSize){
        $("#studentTable").html("");
        var htmls = "<tr>"+
            "<th>勾选框</th>"+
            "<th>编号</th>"+
            "<th>姓名</th>"+
            "<th>性别</th>"+
            "<th>生日</th>"+
            "<th>按钮</th>"+
            "</tr>";
        $.ajax({
            url:basePath+"/student/getStudentPage",
            type:"GET",
            async:false,
            data:{"page":pageNum,"size":pageSize},
            success:function(data){
                if(data.code==0){
                    for(var i in data.data.rows){
                        htmls += "<tr>"+
                            "<td>"+"<input type='checkbox' class='check-box'>"+"</td>"+
                            "<td class='sId'>"+data.data.rows[i].id+"</td>"+
                            "<td class='sName'>"+data.data.rows[i].name+"</td>"+
                            "<td class='sSex'>"+data.data.rows[i].sex+"</td>"+
                            "<td class='sBirth'>"+data.data.rows[i].birth+"</td>"+
                            "<td>"+
                            "<input type='button' class='modify' onclick='formMd(this)' value='修改'>"+
                        "<input type='button' class='delete' onclick='deleteSt(this)' value='删除'>"+"</td>"+
                            "</tr>";
                    }
                    $("#studentTable").html(htmls);
                    $("#currPage").text(pageNum)
                    $("#totolPage").text(Math.ceil(data.data.total/pageSize))
                }else{
                    alert(data.msg);
                }
            },
            error:function(){
                alert("请求错误");
            }
        });
    }
    function deleteSt(obj) {
        var check_box = $(".check-box");
        var idList = $(".sId");
        var checkID =new Array();
        for (var i in check_box) {
            if (check_box[i].checked) {
                checkID.push(idList[i].innerText)
            }
        }
        if (checkID.length == 0) {
            var id = $(obj).parent().parent().children(".sId");
            checkID.push(id[0].innerText)
        }

        var data = JSON.stringify(checkID);
        $.ajax({
            url: basePath+"/student/deleteStudent",
            dataType: "json",
            // traditional: true,
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify(checkID),
            // data:data,
            type: "POST",
            async: false,
            success: function (data) {
                var cuurPage=$("#currPage").text();
                cuurPage=parseInt(cuurPage)
                initTable(cuurPage,pageSize);
            }

        })
    }
    function toModify(){
        var StudentDO={
            id:$("#stId").val(),
            name:$("#stName").val(),
            birth:$("#stBirth").val(),
            sex:$("#stSex").val()
        }
        $.ajax({
            url:basePath+"/student/updateStudent",
            type:"POST",
            contentType: "application/json;charset=UTF-8",
            async:false,
            data:JSON.stringify(StudentDO),
            success:function (data) {
                var cuurPage=$("#currPage").text();
                cuurPage=parseInt(cuurPage)
                initTable(cuurPage,pageSize);
            },
            error:function () {
                alert("请求错误")
            }
        })
    }
    function toInsert(){
        var dateLabel=$("#stBirth").val();
        dateLabel.replaceAll("/","-")
        var StudentDO={
            id:0,
            name:$("#stName").val(),
            birth:$("#stBirth").val(),
            sex:$("#stSex").val()
        }
        $.ajax({
            url:basePath+"/student/insertStudent",
            type:"POST",
            contentType: "application/json;charset=UTF-8",
            async:false,
            data:JSON.stringify(StudentDO),
            success:function (data) {
                var cuurPage=$("#currPage").text();
                cuurPage=parseInt(cuurPage)
                initTable(cuurPage,pageSize);
                layer.open({
                    title:'表单提示',
                    content:'提交成功',
                    success:function () {
                        $("#stName").val(''),
                            $("#stBirth").val(''),
                            $("#stSex").val('')
                    }
                })
            },
            error:function () {
                alert("请求错误")
            }
        })
    }
    function toSubmit(){
        var id=$("#stId").val()
        if (id==null||id==""){
            toInsert()
        }else {
            toModify()
        }
    }
</script>
</html>